<template>
  <div>菜单管理</div>
  <router-link :to="{ path: '/loan', query: { name: '小明' } }"
    >跳转到贷款管理</router-link
  >
  <router-link :to="{ name: 'userManage' }">跳转到贷款管理</router-link>
  <router-link :to="{ name: 'userDetail', params: { id: 1 } }"
    >跳转到用户详情</router-link
  >
  菜名：<input type="text" v-model="searchObj.name" />
  <button @click="getData">搜索</button>
  <table>
    <thead>
      <th v-for="item in config" :key="item.dataIndex">{{ item.title }}</th>
    </thead>
    <tbody>
      <tr v-for="item in dataSource" :key="item.id">
        <td v-for="tableConfig in config" :key="tableConfig.dataIndex">
          {{ item[tableConfig.dataIndex] }}
        </td>
        <td><slot :record="item">编辑 新增 删除</slot></td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import { ref } from "vue";
import { getMenuList } from "../../service/menu";
const dataSource = ref([]);
const searchObj = ref({});
const config = [
  { title: "id", dataIndex: "id" },
  { title: "菜名", dataIndex: "name" },
  { title: "价格", dataIndex: "price" },
];
const getData = async () => {
  const res = await getMenuList(searchObj.value);
  dataSource.value = res.data.data.record;
};
getData();
</script>

<style></style>
